<template>
  <div class="pdf-viewer-page">
    <div class="debug-notice">
      <el-alert
        title="调试模式"
        type="info"
        description="当前使用SimplePdfViewer组件进行调试"
        show-icon
        :closable="false"
      />
    </div>
    
    <SimplePdfViewer />
    
    <!-- 使用说明 -->
    <el-card class="help-card">
      <template #header>
        <h3>PDF预览器使用说明</h3>
      </template>
      
      <div class="help-content">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="feature-item">
              <el-icon class="feature-icon"><Upload /></el-icon>
              <h4>上传PDF</h4>
              <p>支持拖拽或点击选择PDF文件，自动加载并预览</p>
            </div>
          </el-col>
          
          <el-col :span="8">
            <div class="feature-item">
              <el-icon class="feature-icon"><View /></el-icon>
              <h4>预览功能</h4>
              <p>支持翻页、缩放、全屏等完整的PDF预览功能</p>
            </div>
          </el-col>
          
          <el-col :span="8">
            <div class="feature-item">
              <el-icon class="feature-icon"><Download /></el-icon>
              <h4>下载打印</h4>
              <p>支持PDF下载和打印功能，方便保存和分享</p>
            </div>
          </el-col>
        </el-row>
        
        <el-divider />
        
        <div class="usage-steps">
          <h4>使用步骤：</h4>
          <ol>
            <li>点击"选择PDF文件"按钮或拖拽PDF文件到上传区域</li>
            <li>等待PDF加载完成，系统会自动显示第一页</li>
            <li>使用工具栏进行翻页、缩放等操作</li>
            <li>点击"下载PDF"保存文件到本地</li>
            <li>点击"打印PDF"进行打印操作</li>
          </ol>
        </div>
        
        <div class="features-list">
          <h4>功能特性：</h4>
          <ul>
            <li>✅ 支持PDF文件上传和预览</li>
            <li>✅ 支持翻页、缩放、全屏操作</li>
            <li>✅ 支持PDF下载和打印</li>
            <li>✅ 响应式设计，适配各种设备</li>
            <li>✅ 文件信息显示</li>
            <li>✅ 错误处理和重试机制</li>
          </ul>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import SimplePdfViewer from '@/components/SimplePdfViewer.vue'
</script>

<style scoped>
.pdf-viewer-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

.debug-notice {
  margin-bottom: 20px;
}

.help-card {
  margin-top: 20px;
}

.help-content {
  padding: 20px 0;
}

.feature-item {
  text-align: center;
  padding: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  height: 100%;
}

.feature-icon {
  font-size: 48px;
  color: #409eff;
  margin-bottom: 15px;
}

.feature-item h4 {
  margin: 10px 0;
  color: #333;
}

.feature-item p {
  color: #666;
  line-height: 1.6;
}

.usage-steps {
  margin: 20px 0;
}

.usage-steps h4 {
  color: #333;
  margin-bottom: 15px;
}

.usage-steps ol {
  padding-left: 20px;
}

.usage-steps li {
  margin: 8px 0;
  color: #666;
  line-height: 1.6;
}

.features-list {
  margin: 20px 0;
}

.features-list h4 {
  color: #333;
  margin-bottom: 15px;
}

.features-list ul {
  padding-left: 20px;
}

.features-list li {
  margin: 8px 0;
  color: #666;
  line-height: 1.6;
}
</style>
